<template>
    <div>
      <el-page-header content="添加费用" icon="" title="月物业收费添加" />
    </div>
    <el-form
      ref="rateFormRef"
      :model="rateForm"
      :rules="rateFormRules"
      label-width="150px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="公摊水费" prop="water">
        <el-input v-model="rateForm.water" />
      </el-form-item>
  
      <el-form-item label="公摊电费" prop="electric">
        <el-input v-model="rateForm.electric" />
      </el-form-item>
  
      <el-form-item label="电梯维护费" prop="elevator">
        <el-input v-model="rateForm.elevator" />
      </el-form-item>

      <el-form-item label="绿化卫生秩序费" prop="sanitation">
        <el-input v-model="rateForm.sanitation" />
      </el-form-item>

      <el-form-item label="公用设备维护费" prop="publicrete">
        <el-input v-model="rateForm.publicrete" />
      </el-form-item>
  
      
  
        <el-form-item>
          <el-button type="primary" @click="submitForms()">更新提交</el-button>
        </el-form-item>
    </el-form>
  </template>
  
  <script setup>
  import { ref, reactive,onMounted } from "vue";
  import Upload from "@/components/upload/Upload";
  import upload from "@/util/upload"
  import {useRouter} from "vue-router"
  import axios from "axios";
  const rateFormRef = ref();
  const rateForm = reactive({
    water: null,//水费
    electric: null,//电费
    elevator: null,//电梯维护费
    sanitation: null,//绿化卫生秩序费
    publicrete: null,//公用设备维护费
  });


  
  const rateFormRules = reactive({
    water: [{ required: true, message: "请输入费用", trigger: "blur" }],
    electric: [
      { required: true, message: "请输入费用", trigger: "blur" },
    ],
    elevator: [{ required: true, message: "请输入费用", trigger: "blur" }],
    sanitation: [{ required: true, message: "请输入费用", trigger: "blur" }],
    publicrete: [{ required: true, message: "请输入费用", trigger: "blur" }],
  });
  
  
  const router = useRouter()

  //拿回业主信息
  const PData = ref([]);
  onMounted(() => {
    getTableData();
  });
  const getTableData = async () => {
    const res = await axios.get("/adminapi/prop/list");
    //console.log(res.data.data)
    PData.value = res.data.data;
  };



  const submitForm =(i)=>{
    rateFormRef.value.validate(async(valid)=>{
            if(valid){
              const content = PData.value[i]
              const rnum = Number(content.roomnumber.substring(0,1))/10  //楼层 根据楼层不同动态收费
              const basicsMoney = content.roomarea*0.5
              const extendMoney = Number(rateForm.water)+Number(rateForm.electric)+(Number(rateForm.elevator)   *rnum)+Number(rateForm.sanitation)+Number(rateForm.publicrete) //扩展费用
              const totalMoney = basicsMoney+extendMoney
              const lastForm =reactive({
                  propname: content.propname,
                  propnumber: content.propnumber,
                  propemail: content.propemail,
                  building:content.building,
                  roomnumber:content.roomnumber,
                  basics:basicsMoney, //0.5元一平米
                  extend :extendMoney,
                  tmoney:totalMoney,
                  ispay:0,
              })
              //console.log(rnum)
              //console.log(PData.value[0])
              await upload("adminapi/rate/add",lastForm)
              router.push(`/propertycharges-manage/expense`)
            }
    })
  }
  const submitForms = ()=>{
    console.log(PData.value)
    for(let i=0;i<PData.value.length;i++){
      submitForm(i)
    }
  }


  

  </script>
  
  
  <style scoped lang="scss">
  .demo-ruleForm {
    margin-top: 50px;
  }
  .el-row {
    margin-top: 20px;
    .box-card {
      text-align: center;
    }
  }

  </style>
  